<template>
  <div class="shade" v-if="isBillListShow" data-aos="fade-left"></div>

  <div class="form" data-aos="fade-left" v-if="isBillListShow">
    <div class="form-title">
      <div class="title">
        报销明细
      </div>
      <div class="operate">
        <el-button type="success" @click="downloadExcel">
          下载报表
        </el-button>
      </div>
    </div>
    <el-scrollbar >
      <div class="bill-table">
        <el-table :data="tableData" border style="width: 100%" empty-text="暂无数据">
          <el-table-column
              fixed
              prop="finance_index"
              label="ID"
              width="60"
              align="center"
          />
          <el-table-column
              prop="related_project_name"
              label="项目名"
              width="200"
              align="center"
          />
          <el-table-column
              prop="flow_uploader_name"
              label="报销人"
              width="180"
              align="center"
          />
          <el-table-column
              prop="total_money"
              label="报销金额"
              width="180"
              align="center"
          />
          <el-table-column
              prop="bill_no"
              label="凭证编号"
              width="250"
              align="center"
          />
          <el-table-column
              prop="date"
              label="报销日期"
              width="180"
              align="center"
          >
            <template #default="{row}">
              {{ computeDate(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="first_party"
              label="甲方对接人"
              width="180"
              align="center"
          />
          <el-table-column
              prop="flow_detail"
              label="备注"
              align="center"
          />
        </el-table>
      </div>
    </el-scrollbar>
  </div>
  <div class="close-btn" @click="closeForm" data-aos="fade-left" v-if="isBillListShow">
    <span>关</span>
    <span>闭</span>
  </div>
</template>

<script setup>
import {ElButton, ElMessage, ElMessageBox, ElTable, ElTableColumn} from "element-plus"
import {onMounted, ref,} from "vue"
import emitter from "@/lib/eventBus"
import {computeDate} from "@/lib/utils"
import {get_current_pro_money, outputExcel} from "@/api/Project"
import {baseurl} from "@/api/http"


const emit = defineEmits(['reloadList'])
//遮罩层
const isBillListShow = ref(false)
//报销列表
const tableData = ref([])
// 当前项目id
let currentProject
let first_party

const baseUrl = `${baseurl}/outputExcel?projectId=`
// const baseUrl = 'http://120.46.72.236:8009/outputExcel?projectId='

//用户信息
let user_info
//遮罩层
const users = ref([])


onMounted(()=>{
  getUserInfo()
  AOS.init()
  setTimeout(()=>{
    getBillList()
  },200)
})

//获取用户信息
const getUserInfo = () => {
  user_info = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getBillList = async () => {
  const {data:res} = await get_current_pro_money({
    projectId:currentProject
  })
  tableData.value = res.data
}

const downloadExcel = async () => {
  if(!tableData.value.length){
    return ElMessage({
      message:'无可打印的报销明细',
      type:'info'
    })
  } else {
    const link = document.createElement('a')
    link.href = baseUrl+currentProject
    link.click()
  }
}

//遮罩层显隐
const showBills = (id) => {
  isBillListShow.value = !isBillListShow.value
  currentProject = id
}


//关闭、重置表单
const closeForm = () => {
  isBillListShow.value = false
}


defineExpose({
  showBills,
  getBillList
})
</script>

<style scoped lang="less">
.create-box{
  height: 89%;
  width: 18%;
  margin-top: 1.5vh;
  margin-left: 4vw;
  background-color: rgba(250, 250, 250);
  border-radius: 10px;
  box-shadow: 0 0 5px 5px lightgray;
  border: 1px solid lightgray;
  .create_title{
    height: 5vh;
    border-bottom: 1px solid #d6d6d6;
    line-height: 5vh;
    text-align: left;
    padding-left: 1.5vw;
    box-sizing: border-box;
    font-size: 2vh;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .create_body{
    .body_item{
      margin-bottom: 1.5vh;
      .body_title{
        height: 5vh;
        border-bottom: 1px solid #ebebeb;
        text-align: left;
        line-height: 5vh;
        padding-left: 1.5vw;
        font-weight: 600;
        letter-spacing: 1px;
      }
      .items{
        display: flex;
        flex-wrap: wrap;
        .item{
          height: 8vh;
          border-right: 1px solid rgba(245, 245, 245);
          width: 32%;
          border-bottom: 1px solid rgba(245, 245, 245);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .el-icon{
            margin-bottom: 5px;
            color: rgba(66,133,244);
            font-size: 2.5vh;
          }
          span{
            font-size: 1.5vh;
          }
          &:hover{
            cursor: pointer;
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
}
.shade{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 800;
  top: 0vh;
  left: 3vw;
  background-color: rgba(0,0,0,.7);
}
.form{
  position: absolute;
  top: 0vh;
  left: 21vw;
  z-index: 950;
  height: 100vh;
  width: 79vw;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(250, 250, 250);
  .form-title{
    text-align: left;
    font-size: 2.2vh;
    font-weight: 600;
    letter-spacing: 1px;
    padding-left: 2vh;
    margin-top: 1vh;
    display: flex;
    justify-content: space-between;
    padding-right: 1vw;
    margin-bottom: 2vh;
  }
  .leave-form{
    margin-top: 1vh;
    max-height: 84vh;
    margin-bottom: 3vh;
    .el-form{
      padding: 2vh;
      .el-form-items{
        width: 69vw;
        border: 1px solid rgba(238, 238, 238);
        margin: 0 !important;
        //background-color: ;
        height: 8vh;
        align-items:center;
        justify-content: center;
        .el-form-item--default .el-form-item__label {
        }
        :deep(.el-form-item__label-wrap) {
          width: 10vw;
          line-height: 8vh;
          height: 8vh;
          text-align: center;
          box-sizing: border-box;
          border-right: 1px solid rgba(238, 238, 238);
          margin-left: 0 !important;
          &:last-child {
            border-right: none;
          }
        }
        :deep(.el-form-item__label){
          padding: 0 !important;
          margin: auto !important;
        }
        :deep(.el-range-editor.el-input__wrapper){
          width: 45vw;
          margin-left: 3vw;
        }
        :deep(.el-input) {
          width: 46vw !important;
          margin-left: 3vw;
        }
        :deep(.el-textarea ){
          width: 46vw !important;
          margin-left: 3vw;
        }
      }
    }
    .group{
      width: 69vw;
      min-height: 10vh;
      display: flex;
      border-right: 1px solid rgba(238, 238, 238);
      border-left:  1px solid rgba(238, 238, 238);
      .title{
        width: 14.6%;
        min-height: 10vh;
        line-height: 8vh;
        border-right: 1px solid rgba(238, 238, 238);
        box-sizing: border-box;
        text-align: center;
        font-size: 1.5vh;
        color: rgb(96, 98, 102);
      }
      .items{
        width: 86%;
        display: flex;
        flex-direction: column;
        padding: 1vh 1vh 1vh 6.5vh;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        .item{
          margin-top: 1vh;
          display: flex;
          justify-content: left;
        }
      }
    }
    .upload-demo{
      height: 3vh;
      width: 50vw;
      display: flex;
      justify-content: left;
      align-items: center;
      :deep(.el-upload-list ){
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
        position: relative;
        width: 50vw;
      }
    }
  }
}
.close-btn{
  position: absolute;
  top: 15vh;
  left: 19vw;
  height: 9vh;
  width: 3.5vw;
  z-index: 899;
  background-color: rgba(255, 87, 34);
  margin: 1vh auto;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  color: white;
  flex-direction: column;
  padding-left: 0.5vw;
  align-items: start;
  font-size: 1.6vh;
  &:hover{
    cursor: pointer;
  }
}
:deep(.el-form-item--default .el-form-item__content) {
  line-height: 32px;
  height: 8vh;
  background-color: #fff;
}
.upload{
  :deep(.form .leave-form .el-form .el-form-items .el-form-item__label-wrap){
    line-height: 13vh;
    height: 13vh;
  }
  :deep(.el-form-item__content){
    height: 13vh;
  }
}
</style>

